<template>
  <ul class="cinema-list hidden-scrollbar" v-if="showDate && computedCinemaList.length > 0">
    <li class="cinema-list-item" v-for="cinema in computedCinemaList" :key="cinema.cinemaId"
        @click="$router.push(`/cinema/${cinema.cinemaId}/film/${filmId}/${showDate}`)">
      <ul class="cinema-info-left">
        <li class="cinema-name">{{ cinema.name }}</li>
        <li class="cinema-address">{{ cinema.address }}</li>
      </ul>
      <ul class="cinema-info-right">
        <li class="cinema-price">
          <i>￥</i>{{ cinema.lowPrice / 100 }}<span>起</span>
        </li>
        <li class="cinema-distance">距离未知</li>
      </ul>
    </li>
  </ul>
  <van-empty description="没有找到匹配的影院" v-else />
</template>

<script>
import { mapState } from 'vuex'
import { Empty } from 'vant'

export default {
  name: 'TicketList',
  props: {
    cinemaList: {
      type: Array,
      default: () => []
    },
    cinemaKwd: {
      type: String,
      default: ''
    },
    showDate: {
      type: Number,
      default: 0
    },
    districtId: {
      default: ''
    }
  },
  components: {
    [Empty.name]: Empty
  },
  computed: {
    ...mapState('CityModule', ['cityId']),
    filmId () {
      return this.$route.params.filmId
    },
    computedCinemaList () {
      return this.cinemaList
        .filter(
          (cinema) =>
            cinema.name.toUpperCase().includes(this.cinemaKwd.toUpperCase()) ||
            cinema.address.toUpperCase().includes(this.cinemaKwd.toUpperCase())
        )
        .filter((cinema) => this.districtId === '' || cinema.districtId === this.districtId)
    },
    // TODO 根据GPS定位信息算出对应的距离，这里省略
    computedDistance () {
      return '距离未知'
    }
  },
  methods: {
    toCinema (cinemaId) {
      this.$router.push(
        `/cinema/${cinemaId}/film/${this.filmId}/${this.showDate}` // 跳转路由
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-list {
  height: calc(100vh - 188px);
  .cinema-list-item {
    min-height: 75px;
    padding: 15px;
    display: flex;
    border-bottom: 1px solid #f4f4f4;
    .cinema-info-left {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      cursor: pointer;
      .cinema-name {
        width: 275px;
        font-size: 15px;
        color: #191a1b;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .cinema-address {
        width: 250px;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #797d82;
      }
    }
    .cinema-info-right {
      width: 70px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .cinema-price {
        color: #ff5f16;
        font-size: 15px;
        i {
          font-style: normal;
          font-size: 12px;
        }
        span {
          font-size: 10px;
        }
      }
      .cinema-distance {
        color: #797d82;
        font-size: 11px;
      }
    }
  }
}
</style>
